<!DOCTYPE html>
<html>
    <audio id="lotteryBeep" src="sounds/beep.mp3"></audio>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        
       * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial !important; /* 强制字体统一 */
}

        body {
            margin: 0;
            height: 100vh;
            background: linear-gradient(45deg, #000428, #004e92);
            color: white;
            font-family: 'Arial', sans-serif;
            display: grid;
            grid-template-columns: 3fr 1fr;
            position: relative;
            overflow: hidden;
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 5s infinite;
        }

        @keyframes twinkle {
            0%, 100% {
                opacity: 0.2;
            }
            50% {
                opacity: 1;
            }
        }

        #container {
            padding: 20px;
            position: relative;
            z-index: 1;
        }

        #rollName {
            font-size: 4em;
            text-align: center;
            margin: 20px;
            text-shadow: 0 0 10px #00f7ff;
        }

        .groups {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .group {
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease-in-out;
        }

        .group:hover {
            transform: scale(1.05);
        }

        /* 每组第1个学生特效 */
       .group div:nth-child(2) {
            color: #ffd700;
            text-shadow: 0 0 20px #ffd700;
            animation: enhancedGlow 2s infinite;
        }

       /* 每组第2个学生稍弱特效 */
       .group div:nth-child(3) {
            color: #00ff7f;
            text-shadow: 0 0 10px #00ff7f;
            animation: lessEnhancedGlow 2s infinite;
        }

        @keyframes enhancedGlow {
            0%, 100% {
                filter: hue-rotate(0deg);
            }
            50% {
                filter: hue-rotate(45deg);
            }
        }

        @keyframes lessEnhancedGlow {
            0%, 100% {
                filter: hue-rotate(0deg);
            }
            50% {
                filter: hue-rotate(20deg);
            }
        }


        .group-title {
            font-size: 1.5em;
            text-align: center;
            margin-bottom: 10px;
        }

        .member {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .member-name {
            font-size: 1em;
        }

        .member-score {
            display: flex;
            align-items: center;
        }

        .member-score button {
            margin: 0 5px;
            padding: 5px 10px;
        }

        .score {
            font-size: 1.2em;
            margin: 10px 0;
            text-align: center;
        }

/* 奖品编辑器样式 */
#prizeEditorModal input {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    background: rgba(255,255,255,0.1);
    border: 1px solid #00f7ff;
    color: white;
}


        #ranking {
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
            border-left: 1px solid #00f7ff;
            z-index: 1;
            position: sticky;
            top: 20px;
        }

        .ranking-item {
            font-size: 1.2em;
            margin: 10px 0;
            padding: 5px;
            background: linear-gradient(90deg, transparent, #ffffff33);
            /* 增加分数变化的过渡效果 */
            transition: all 0.3s ease;
        }

        .ranking-item span {
            font-size: 1.2em;
        }

        #saveRestoreButtons {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
        }

        #lotteryArea {
            grid-column: 1 / -1;
            text-align: center;
            padding: 20px;
            position: relative;
            display: none;
        }

        #lotteryResult {
            font-size: 2em;
            margin-top: 20px;
            color: #ffd700;
            text-shadow: 0 0 20px #ffd700;
            border: 1px solid #ffd700;
            border-radius: 10px;
            padding: 10px;
        }

        #audioPlayer {
            display: none;
        }

        #currentRollNameControls {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
        }

        #currentRollNameScore {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        #currentRollNameScore button {
          padding: 5px 15px;
          font-size: 0.8em;
          margin: 0 15px;
          border-radius: 10px;
          min-width: 40px;
          transition: all 0.3s;
}
       #currentRollNameScore button:hover {
         transform: scale(1.1);
         background: rgba(255,255,255,0.2);
}

        #lotteryModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;        /* 使用视口单位 */
    height: 100vh;
    background: rgba(0,0,0,0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

        #lotteryContent {
    background: rgba(0,0,0,0.95);
    padding: 40px;
    border-radius: 20px;
    border: 3px solid #ffd700;
    position: relative;
    width: 66vw;        /* 视口宽度的2/3 */
    height: 66vh;       /* 视口高度的2/3 */
    min-width: 600px;   /* 最小尺寸保证内容可见 */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

        #closeLottery {
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            cursor: pointer;
            font-size: 24px;
        }

#lotteryModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#lotteryContent {
    background: rgba(0,0,0,0.9);
    padding: 30px;
    border-radius: 15px;
    border: 2px solid #ffd700;
    position: relative;
    width: 400px;
    text-align: center;
}

#lotteryResult {
    font-size: 3em;             /* 放大字体 */
    margin: 30px 0;
    min-height: 120px;          /* 增加高度 */
    color: #ffd700;
    text-shadow: 0 0 20px #ffd700;
    line-height: 1.5;
    padding: 20px;
    border: 2px solid #ffd70033;
    border-radius: 15px;
    flex-grow: 1;               /* 占据剩余空间 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 抽奖结果滚动动画 */
@keyframes scrollPrize {
    0% { transform: translateY(100%); }
    100% { transform: translateY(-100%); }
}

#lotteryResult.scrolling {
    animation: scrollPrize 0.8s infinite linear;
    overflow: hidden;
}

#saveRestoreButtons {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    gap: 10px; /* 新增按钮间距 */
    flex-wrap: wrap; /* 响应式换行 */
}

    </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
</head>
<body>
    <div id="container">
        <div id="saveRestoreButtons">
            <button onclick="saveScores()">💾 保存并导出积分</button>
            <button onclick="importStudents()">📝 导入学生姓名</button>
            <button onclick="clearAllScores()">🗑️ 一键清空所有积分</button>
            <button onclick="toggleLotteryArea()">🎉 随机抽奖</button>
            <button onclick="exportPrizes()">📤 导出奖品数据</button>
            <button onclick="importPrizes()">📥 导入奖品数据</button>
            
        </div>
        <div id="rollName">Ready</div>
        <div id="currentRollNameControls">
            <div>
                <button onclick="startRoll()">🚀 开始点名</button>
                <button onclick="stopRoll()">🛑 停止点名</button>
            </div>
            <div id="currentRollNameScore">
                <span id="currentRollName"></span>
                <button onclick="changeCurrentRollScore(-1)">-</button>
                <span id="currentRollScore">0</span>
                <button onclick="changeCurrentRollScore(1)">+</button>
            </div>
        </div>
        <div>调节点名速度👉</div>
        <input type="range" id="speedSlider" min="10" max="200" value="10" oninput="changeSpeed(this.value)">
        <div class="groups" id="groups"></div>
        <div id="lotteryModal">
    <div id="lotteryContent">
        <div id="closeLottery" onclick="toggleLotteryArea()" 
             style="position:absolute;top:10px;right:10px;color:white;cursor:pointer;font-size:24px">×</div>
        <div id="lotteryResult">点击开始进行抽奖</div>
        <div style="margin:20px">
            <button onclick="startLottery()">▶️ 开始抽奖</button>
            <button onclick="stopLottery()">⏹️ 停止抽奖</button>
            <button onclick="showPrizeEditor()">✏️ 编辑奖品</button>
        </div>
        <div>
            抽奖速度调节：
            <input type="range" id="lotterySpeedSlider" 
                   min="10" max="200" value="100"
                   oninput="changeLotterySpeed(this.value)">
        </div>
    </div>
</div>
    </div>
  <div id="ranking">
        <div style="font-size:2em;margin-bottom:20px;">🏆 实时排行榜</div>
        <div id="rankingList"></div>
    </div>

    <audio id="audioPlayer" src="sounds/beep.mp3"></audio>

    <script>
        let students = [
            "侯圣渊", "朱竞霖", "陈俊衡", "格桑嘉措", "严津茸", "贺雨嘉", "乔永涛", "唐雨馨", "余萌", "范弘兴",
            "柴昱云", "方文蕙", "杨叶青", "王煜博", "刘丽", "陈瑛", "赵怡霏", "马嘉嶺", "孙晟伦", "柴昱山",
            "王子昊", "王卯华", "贾希嵘", "李好山", "刘玺宝", "刘昱垚", "韩雅琴", "杜骋博", "赵钰鑫", "柴婷",
            "胡雅馨", "张发浩", "朱琨", "李昱辰", "王旭辰", "方文蕊", "武郁文", "赵崇瀚", "曾子轩", "苏国文",
        ];

        let rolling = false;
        let groups = Array(10).fill().map((_, i) => ({
            members: students.slice(i * 4, i * 4 + 4),
            score: localStorage.getItem(`group-${i}`) || 0
        }));
        let rollSpeed = 200;
        let savedScores = [];
        let lastRolledIndex = Math.floor(Math.random() * students.length);
        let individualScores = students.map((student, index) => ({
            name: student,
            group: Math.floor(index / 4) + 1,
            score: 0
        }));
        let audioPlayer = document.getElementById('audioPlayer');



 // 核心功能
        function initSystem() {
            groups = Array(Math.ceil(students.length / 4)).fill().map((_, i) => ({
                members: students.slice(i*4, i*4+4),
                score: localStorage.getItem(`group-${i}`) || 0
            }));
            
            individualScores = students.map((name, index) => ({
                name,
                group: Math.floor(index/4) + 1,
                score: 0
            }));
            
            createGroups();
            updateRanking();
        }

        

        function getScore(name) {
            return individualScores.find(s => s.name === name)?.score || 0;
        }

        function changeScore(name, delta) {
            const student = individualScores.find(s => s.name === name);
            if (!student) return;
            
            student.score = Math.max(0, student.score + delta);
            updateGroupScore(student.group - 1);
            updateRanking();
            refreshDisplay();
        }

        function updateGroupScore(groupIndex) {
            groups[groupIndex].score = groups[groupIndex].members
                .reduce((sum, name) => sum + getScore(name), 0);
            localStorage.setItem(`group-${groupIndex}`, groups[groupIndex].score);
        }

// ======== 抽奖功能优化版本 ========
let lotteryInterval = null;
let lotterySpeed = 100;
let lastPrize = "未开始抽奖"; // 新增：记录最后抽中奖品



function toggleLotteryArea() {
    const modal = document.getElementById('lotteryModal');
    if (modal.style.display === 'flex') {
        stopLottery();
        modal.style.display = 'none';
    } else {
        modal.style.display = 'flex';
        document.getElementById('lotteryResult').textContent = lastPrize; // 显示上次结果
    }
}


function startLottery() {
    if (lotteryInterval) return;
    
    const lotteryBeep = document.getElementById('lotteryBeep');
    lotteryBeep.currentTime = 0; // 重置播放进度
    lotteryBeep.loop = true;     // 循环播放
    lotteryBeep.play();

    document.getElementById('lotteryResult').textContent = "抽奖中...";
    const total = prizes.length; // 获取奖品总数
    
    lotteryInterval = setInterval(() => {
        // 等概率随机算法
        const index = Math.floor(Math.random() * total);
        lastPrize = prizes[index].name; // 记录最后结果
        document.getElementById('lotteryResult').textContent = lastPrize;
    }, lotterySpeed);
}

function stopLottery() {
    if (lotteryInterval) {
        clearInterval(lotteryInterval);
        lotteryInterval = null;
        const lotteryBeep = document.getElementById('lotteryBeep');
        lotteryBeep.pause();     // 暂停播放
        lotteryBeep.currentTime = 0;
        document.getElementById('lotteryResult').textContent = lastPrize; // 保留最后结果
    }
}

function changeLotterySpeed(speed) {
    // 实时更新速度值（滑块向右移动速度变快）
    lotterySpeed = 210 - speed; 
    
    // 如果正在抽奖则需要重启
    if (lotteryInterval) {
        stopLottery();
        startLottery();
    }
}

    function exportPrizes() {
    const data = JSON.stringify(prizes);
    const blob = new Blob([data], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = url;
    a.download = `prizes_${new Date().toISOString().slice(0,10)}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

    function importPrizes() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.json';
    input.onchange = (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                try {
                    const newPrizes = JSON.parse(e.target.result);
                    if (!Array.isArray(newPrizes)) {
                        throw new Error('无效的文件格式');
                    }
                    prizes = newPrizes;
                    localStorage.setItem('prizesData', JSON.stringify(prizes));
                    alert('奖品数据导入成功！');
                } catch (err) {
                    alert('文件解析失败：' + err.message);
                }
            };
            reader.readAsText(file);
        }
    };
    input.click();
}

      // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
    // 绑定速度调节器初始值
        document.getElementById('lotterySpeedSlider').value = 200 - lotterySpeed;
    
    // 添加关闭按钮
       document.getElementById('lotteryContent').insertAdjacentHTML('afterbegin', 
        '<div id="closeLottery" onclick="toggleLotteryArea()">×</div>'
       );
});

        function createGroups() {
        const container = document.getElementById('groups');
        container.innerHTML = '';
        groups.forEach((group, i) => {
        const div = document.createElement('div');
        div.className = 'group';
        div.innerHTML = `
            <div class="group-title">第${i + 1}组</div>
            ${group.members.map(member => `
    <div class="member">
        <div class="member-name">${member}</div>
        <div class="member-score">
            <button onclick="changeIndividualScore('${member}', -1)">-</button>
            <span class="individual-score" data-name="${member}">${
                individualScores.find(s => s.name === member)?.score || 0
            }</span>
            <button onclick="changeIndividualScore('${member}', 1)">+</button>
        </div>
    </div>
`).join('')}
            <div class="score">
                <button onclick="changeScore(${i}, -1)">-</button>
                <span id="score-${i}">${group.score}</span>
                <button onclick="changeScore(${i}, 1)">+</button>
            </div>
        `;
        container.appendChild(div);
    });
}



        function changeScore(groupIndex, delta) {
            groups[groupIndex].score = Math.max(0, +groups[groupIndex].score + delta);
            document.getElementById(`score-${groupIndex}`).textContent = groups[groupIndex].score;
            localStorage.setItem(`group-${groupIndex}`, groups[groupIndex].score);
            updateRanking();
        }

       function updateRanking() {
    const sorted = [...groups].sort((a, b) => b.score - a.score).slice(0, 10);
    const rankingList = document.getElementById('rankingList');
    rankingList.innerHTML = sorted.map((group, index) => {
        const originalIndex = groups.findIndex(g => g === group);
        return `
            <div class="ranking-item">
                <span>${index < 3 ? '👑'.repeat(3 - index) : ''} 第${originalIndex + 1}组</span>
                <span>${group.score}分</span>
            </div>
        `;
    }).join('');
}

        function startRoll() {
            rolling = true;
            audioPlayer.loop = true;
            audioPlayer.play();
            const roll = () => {
                if (!rolling) return;
                lastRolledIndex = (lastRolledIndex + 1) % students.length;
                document.getElementById('rollName').textContent = students[lastRolledIndex];
                // 计算当前学生所属组号
               const currentGroup = Math.floor(lastRolledIndex / 4) + 1;
              // 在小字体名字前添加组号
             document.getElementById('currentRollName').innerHTML = `
            <span style="font-size: 1em; color: #00f7ff">第${currentGroup}组 - </span>
            ${students[lastRolledIndex]}
            `;
                setTimeout(roll, rollSpeed);
            }
            roll();
        }

        function stopRoll() {
            rolling = false;
            audioPlayer.pause();
            audioPlayer.currentTime = 0;
            const currentName = document.getElementById('rollName').textContent;
document.getElementById('currentRollScore').textContent = individualScores.find(s => s.name === currentName)?.score || 0;
        }

        function changeSpeed(speed) {
            rollSpeed = 210 - speed;
        }

        function clearAllScores() {
            groups.forEach((group, i) => {
                group.score = 0;
                document.getElementById(`score-${i}`).textContent = 0;
                localStorage.setItem(`group-${i}`, 0);
            });
            individualScores.forEach(s => s.score = 0);
            updateRanking();
            createGroups();
        }

        function saveScores() {
            const timestamp = new Date().toISOString().replace(/[:\-\.]/g, '');
            const filename = `scores_${timestamp}.csv`;
            const data = students.map(student => ({
                姓名: student,
                积分: individualScores.find(s => s.name === student).score
            }));

            let csvContent = "data:text/csv;charset=utf-8,";
            csvContent += Object.keys(data[0]).join(",");
            csvContent += "\n";
            data.forEach(row => {
                csvContent += Object.values(row).join(",");
                csvContent += "\n";
            });

            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", filename);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        
        function changeIndividualScore(studentName, delta) {
            const student = individualScores.find(s => s.name === studentName);
            if (student) {
                student.score = Math.max(student.score + delta);
                document.querySelector(`.individual-score[data-name="${studentName}"]`).textContent = student.score;
                const groupIndex = student.group - 1;
                groups[groupIndex].score = groups[groupIndex].members.reduce((sum, member) => {
                    return sum + individualScores.find(s => s.name === member).score;
                }, 0);
                document.getElementById(`score-${groupIndex}`).textContent = groups[groupIndex].score;
                localStorage.setItem(`group-${groupIndex}`, groups[groupIndex].score);
                updateRanking();
            }
        }

        

        function importStudents() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.xlsx';
            input.onchange = (e) => {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        const data = e.target.result;
                        const workbook = XLSX.read(data, { type: 'binary' });
                        const sheet = workbook.Sheets[workbook.SheetNames[0]];
                        const jsonData = XLSX.utils.sheet_to_json(sheet);
                        students.splice(0, students.length, ...jsonData.map(row => row.姓名));
                        groups = Array(Math.ceil(students.length / 4)).fill().map((_, i) => ({
                            members: students.slice(i * 4, i * 4 + 4),
                            score: localStorage.getItem(`group-${i}`) || 0
                        }));
                        individualScores = students.map((student, index) => ({
                            name: student,
                            group: Math.floor(index / 4) + 1,
                            score: 0
                        }));
                        createGroups();
                    };
                    reader.readAsBinaryString(file);
                }
            };
            input.click();
        }

        // 统一分数修改方法
function updateScore(studentName, delta) {
    const student = individualScores.find(s => s.name === studentName);
    if (!student) return;

    // 更新分数值
    student.score = Math.max(student.score + delta);
    
    // 更新所有相关显示
    document.querySelectorAll(`span[data-name="${studentName}"]`).forEach(span => {
        span.textContent = student.score;
    });
    
    // 更新小组总分
    const groupIndex = student.group - 1;
    groups[groupIndex].score = groups[groupIndex].members.reduce((sum, member) => 
        sum + (individualScores.find(s => s.name === member)?.score || 0), 0
    );
    
    // 更新存储和排行榜
    document.getElementById(`score-${groupIndex}`).textContent = groups[groupIndex].score;
    localStorage.setItem(`group-${groupIndex}`, groups[groupIndex].score);
    updateRanking();
}

// 当前点名学生的分数修改
function changeCurrentRollScore(delta) {
    const currentName = document.getElementById('rollName').textContent;
    updateScore(currentName, delta);
    // 立即更新显示
    document.getElementById('currentRollScore').textContent = individualScores.find(s => s.name === currentName)?.score || 0;
}

// 学生列表中的分数修改
function changeIndividualScore(studentName, delta) {
    updateScore(studentName, delta);
}

 // ======== 奖品编辑功能 ========
let prizes = JSON.parse(localStorage.getItem('prizesData')) || 
    Array(10).fill().map((_,i) => ({ name: `奖品${i+1}`, probability: 0.1 }));

function showPrizeEditor() {
    const container = document.getElementById('prizeInputs');
    container.innerHTML = '';
    // 生成10个输入框
    for (let i = 0; i < 10; i++) {
        container.innerHTML += `
            <input type="text" 
                   value="${prizes[i]?.name || ''}" 
                   placeholder="奖品${i+1}"
                   maxlength="20">
        `;
    }
    document.getElementById('prizeEditorModal').style.display = 'flex';
}

function savePrizes() {
    const inputs = Array.from(document.querySelectorAll('#prizeInputs input'));
    const newPrizes = inputs
        .map(input => input.value.trim())
        .filter(name => name.length > 0)
        .slice(0, 10) // 强制保留前10个
        .map(name => ({ name, probability: 0.1 })); // 固定概率
    
    localStorage.setItem('prizesData', JSON.stringify(newPrizes));
    prizes = newPrizes;
    closePrizeEditor();
}

document.addEventListener('DOMContentLoaded', () => {
    prizes = JSON.parse(localStorage.getItem('prizesData')) || 
        Array(10).fill().map((_,i) => ({ name: `奖品${i+1}`, probability: 0.1 }));
});

function closePrizeEditor() {
    document.getElementById('prizeEditorModal').style.display = 'none';
}       

        createGroups();
        updateRanking();
    
</script>
// ======== 奖品编辑功能 ========
// 修改原有奖品初始化代码
let prizes = JSON.parse(localStorage.getItem('prizesData')) || 
    Array(20).fill().map((_,i) => ({ 
        name: `奖品${i+1}`, 
        probability: 0.05 
    }));

function showPrizeEditor() {
    const container = document.getElementById('prizeInputs');
    container.innerHTML = ''; // 此处为报错行
    for (let i = 0; i < 20; i++) {
        container.innerHTML += `
            <input type="text" 
                   value="${prizes[i]?.name || ''}" 
                   placeholder="奖品${i+1}（留空则删除）"
                   maxlength="20">
        `;
    }
    document.getElementById('prizeEditorModal').style.display = 'flex';
}

function savePrizes() {
    const inputs = Array.from(document.querySelectorAll('#prizeInputs input'));
    prizes = inputs
        .map(input => input.value.trim())
        .filter(name => name.length > 0)
        .slice(0, 20)
        .map(name => ({ 
            name, 
            probability: 1/20 
        }));
    document.getElementById('prizeEditorModal').style.display = 'none';
}

function closePrizeEditor() {
    document.getElementById('prizeEditorModal').style.display = 'none';
}
<!-- 奖品编辑器弹窗 -->
<div id="prizeEditorModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:2000; justify-content:center; align-items:center">
    <div style="background:rgba(0,0,0,0.9); padding:20px; border-radius:10px; width:500px">
        <div style="display:flex; justify-content:space-between; margin-bottom:15px">
            <h3>编辑奖品（最多20个）</h3>
            <button onclick="closePrizeEditor()" style="background:none; border:none; color:white; font-size:20px">×</button>
        </div>
        <div id="prizeInputs" style="max-height:400px; overflow-y:auto"></div>
        <button onclick="savePrizes()" style="margin-top:15px; width:100%">✅ 确定保存</button>
    </div>
</div>
</body>
</html>
